<template>
	<view class="page">
		<view class="banner">
			<swiper @change="selectUserGrade" class="swiper-container" :autoplay="false" interval="3000" circular
				previous-margin="40px" next-margin="30px">
				<swiper-item v-for="(item, index) in userGradeList" :key="item.gradeId" class="swiper-item">
					<view class="card" :class="{ active: userGrade === item.name }">
						<image :src="item.url" class="card-image" />
						<view class="card-content">
							<view class="current_level" v-if="userGrade == item.name">
								当前等级
							</view>
							<view class="current_level" v-else>
								待升等级
							</view>
							<view class="level_tex">
								<text class="number">{{item.name}}</text>
								<!-- <text class="tex">会员</text> -->
							</view>
							<view class="expirationTime">
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>



		<view class="vip_text">
			<view class="title">
				AI应用
			</view>
			<view class="subtitle">
				AIAPPLICATION
			</view>
		</view>
		<view class="applicationList">
			<view :class="['applicationBox',index==activeBox ? 'activeBox' : '']"
				v-for="(item,index) in applicationList" :key="index" @click="activeAPP(item,index)">
				<image class="logo" src="../../../static/yytx.png" mode=""></image>
				<view class="label">
					{{item.aiuseTitle}}
				</view>
				<view class="look">
					去查看
				</view>
			</view>
		</view>
		<view class="lookAll" @click="all(1)">
			展示全部AI应用&nbsp;&nbsp;>
		</view>
		<view class="vip_text">
			<view class="title">
				AI课程
			</view>
			<view class="subtitle">
				COURSE
			</view>
		</view>
		<view class="courseList">
			<view class="courseBox" v-for="(item,index) in productList">
				<image class="logo" :src="item.productImage" mode=""></image>
				<view class="title">
					<text>{{item.productName}}</text>
					<view class="FX1"></view>
					<image class="like" src="../../../static/yyz.png" mode=""></image>
				</view>
				<view class="novice">
					新手必备
				</view>
				<view class="coursebottom">
					<view class="box" style="margin-right: 66rpx;">
						<image src="../../../static/yyy.png" mode=""></image>
						<text>{{item.viewTimes}}</text>
					</view>
					<view class="box">
						<image src="../../../static/yyx.png" mode=""></image>
						<text>{{item.productSales}}</text>
					</view>
					<view class="FX1"></view>
					<view class="price">
						¥{{item.marketPrice}}
					</view>
				</view>
			</view>
		</view>

		<view class="lookAll" @click="all(2)">
			展示全部AI课程&nbsp;&nbsp;>
		</view>
		<view class="upgrade" @click="upgrade">
			会员升级
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userGrade: '',
				selectUserGradeId: '',
				userGradeList: [],
				list: ['https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				applicationList: [],
				productList: [],
				activeBox: 0,
			}
		},
		onShow() {
			this.getUserData();
			this.getUserGradeList();
		},
		methods: {
			activeAPP(e, index) {
				this.activeBox = index
			},
			/*获取数据*/
			getUserData() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._post('user/index/index', {
					source: self.getPlatform()
				}, function(res) {
					self.userGrade = res.data.userGrade;
					//保存用户等级
					uni.setStorageSync('userGrade', res.data.userGrade);
				});
			},
			selectUserGrade(event) {
				const currentIndex = event.detail.current;
				this.selectUserGradeId = this.userGradeList[currentIndex].gradeId;
				console.log('当前选中的ID:', this.selectedId);
				this.getUserGradeAiuseList()
			},
			getUserGradeList() {
				let self = this;
				self._postBody(
					'user/grade/index', {
						appId: 10002,
						pageIndex: 1,
						pageSize: 100
					},
					function(res) {
						self.userGradeList = res.data.records;

						if (!self.selectUserGradeId && self.userGradeList && self.userGradeList.length > 0) {
							self.selectUserGradeId = self.userGradeList[0].gradeId;
						}
						self.userGradeList.forEach((item) => {
							item.url = "../../../static/yybj.png"
						})
						self.getUserGradeAiuseList();
						self.getProducts();
					}
				);
			},
			getUserGradeAiuseList() {
				let self = this;
				self._get(
					'plus/aiuse/aiuse/getGradeAiuse', {
						appId: 10002,
						gradeId: this.selectUserGradeId
					},
					function(res) {
						self.applicationList = res.data;
						if (!self.selectUserGradeId && self.userGradeList && self.userGradeList.length > 0) {
							self.selectUserGradeId = self.userGradeList[0].gradeId;
						}
					}
				);
			},
			all(val) {
				if (val === 1) {
					uni.navigateTo({
						url: '/pages/aiuse/index'
					})
				} else {
					uni.navigateTo({
						url: '/pages/college/index'
					})
				}
			},
			/*获取数据*/
			getProducts() {
				let self = this;
				let page = self.page;
				self.loading = true;
				self._postBody('product/product/lists', {
					pageIndex: page || 1,
					// categoryId: self.selectedCategoryId,
					search: '',
					sortType: 'all',
					sortPrice: 0,
					pageSize: 10,
					appId: 10002,
					gradeId: this.selectUserGradeId
				}, function(res) {
					self.loading = false;
					uni.stopPullDownRefresh();
					self.productList = res.data.records.slice(0, 2);
					self.last_page = res.data.lastPage;
					if (res.data.lastPage <= 1) {
						self.no_more = true;
					}
				});
			},
			upgrade() {
				uni.navigateTo({
					url: '/pages/user/vip/introduce'
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: white;
	}
</style>
<style lang="scss" scoped>
	.page {
		padding-bottom: 77rpx;
	}

	.banner {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 280rpx;
		margin-bottom: 90rpx;
	}

	.swiper-container {
		width: 100%;
		height: 280rpx;
	}

	.swiper-item {
		display: flex;
		justify-content: center;
		align-items: center;

		.level_tex {
			position: absolute;
			top: 120rpx;
			left: 36rpx;
			color: #FFFFFF;

			.number {
				font-weight: bold;
				font-size: 60rpx;
				line-height: 87rpx;
				font-style: italic;
			}

			.tex {
				font-weight: 400;
				font-size: 30rpx;
				margin-left: 10rpx;
			}
		}

		.current_level {
			position: absolute;
			top: 36rpx;
			left: 22rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #0F4BCB;
		}
	}

	.card {
		width: 100%;
		height: 100%;
		background-color: white;
		border-radius: 10px;
		overflow: hidden;
		position: relative;
		transition: transform 0.3s ease;
	}

	.card.active {
		transform: scale(1);
	}

	.card-image {
		width: 590rpx;
		height: 280rpx;
		object-fit: cover;
	}

	.card-content {
		text-align: center;
	}

	.current-level {
		position: absolute;
		bottom: 10px;
		left: 10px;
		background: rgba(0, 0, 0, 0.5);
		color: white;
		padding: 5px;
		border-radius: 3px;
	}

	.vip_text {
		display: flex;
		align-items: flex-end;
		margin-left: 37rpx;
		margin-bottom: 30rpx;

		.title {
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
			margin-right: 13rpx;
		}

		.subtitle {
			font-weight: bold;
			font-size: 30rpx;
			color: #CCCCCC;
		}
	}

	.applicationList {
		margin: 0 20rpx;
		height: 310rpx;
		display: flex;
		overflow-x: auto;
		overflow-y: hidden;
		gap: 10rpx;

		.applicationBox {
			flex-shrink: 0;
			text-align: center;
			width: 230rpx;
			height: 310rpx;
			background: #F6F6F6;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			flex-direction: column;

			.logo {
				width: 110rpx;
				height: 110rpx;
				margin-top: 35rpx;
			}

			.label {
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
				margin-top: 20rpx;
			}

			.look {
				text-align: center;
				width: 120rpx;
				height: 50rpx;
				line-height: 50rpx;
				background: #FFFFFF;
				font-weight: 400;
				font-size: 24rpx;
				color: #0F4BCB;
				border-radius: 15rpx;
				margin: 0 auto;
				margin-top: 23rpx;
			}
		}
		
		.activeBox {
			background-image: url('../../../static/yybj2.png');
			background-size: 100% 100%;
		
			.title {
				color: #FFFFFF;
			}
		
			.label {
				color: #FFFFFF;
			}
		
			.look {
				background: #FFFFFF;
				color: #0F4BCB;
			}
		}
			
	}

	.courseBox {
		width: 710rpx;
		height: 190rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 22rpx 5rpx rgba(7, 67, 200, 0.1);
		border-radius: 20rpx;
		margin: 96rpx 20rpx 0 20rpx;
		position: relative;

		.logo {
			width: 210rpx;
			height: 250rpx;
			border-radius: 30rpx 30rpx 0rpx 30rpx;
			position: absolute;
			left: 0;
			bottom: 0;
		}

		.title {
			margin-left: 240rpx;
			display: flex;
			font-weight: 400;
			font-size: 32rpx;
			color: #000000;
			padding-top: 20rpx;

			.like {
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}
		}

		.novice {
			margin-left: 240rpx;
			margin-top: 15rpx;
			width: 130rpx;
			height: 40rpx;
			line-height: 40rpx;
			background: rgba(235, 241, 255, 0);
			border-radius: 10rpx;
			border: 1px solid #0F4BCB;
			font-weight: 400;
			font-size: 24rpx;
			color: #0F4BCB;
			text-align: center;
		}

		.coursebottom {
			margin-top: 26rpx;
			margin-left: 240rpx;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #999999;

			.box {
				display: flex;
				align-items: center;
			}

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 6rpx;
			}

			.price {
				color: #0F4BCB;
				margin-right: 30rpx;
			}
		}
	}

	.lookAll {
		margin-top: 60rpx;
		margin-bottom: 66rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
		text-align: center;
	}

	.upgrade {
		text-align: center;
		margin: 0 auto;
		margin-top: 135rpx;
		width: 500rpx;
		height: 70rpx;
		line-height: 70rpx;
		background: #2168EA;
		border-radius: 35rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
		position: fixed;
		bottom: 40rpx;
		left: 120rpx;
	}
</style>